<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            margin: 50px 100px;
        }
        div{
            margin: 50px 100px;
        }
    </style>
</head>
<body>
        <h1>ps基本工具及快捷键</h1>
        <div>
            选区的作用:限制操作范围<br>
            表示颜色的三种写法:<br>
            &nbsp;&nbsp;&nbsp;1.直接写颜色的英文名称(red,green，blue)<br>
            &nbsp;&nbsp;&nbsp;2.16进制颜色  (#000,#fff)<br>
            &nbsp;&nbsp;&nbsp;3.rgb类型颜色 (rgb(255,0,0))<br>
        </div>
        <div>
            Ctrl + [/]    下移/上移图层<br>
            Ctrl+Shift+[/]  下移至最下/上移至最上<br>
        </div>
        <div>网页中常用的图片格式:jpg,png,gif<br></div>
        <div>
            网页中图片的常用格式gif、jpg、png和相应格式的特点<br>
            &nbsp;&nbsp;&nbsp;gif格式只有256种颜色、支持透明、动画<br>
            &nbsp;&nbsp;&nbsp;jpg格式颜色丰富<br>
            &nbsp;&nbsp;&nbsp;png格式是无损压缩，支持透明<br>
        </div>
        <div>
            切片工具的使用方法:<br>
            &nbsp;&nbsp;&nbsp;选中切边工具,将所要区域在画布上划分切片,用切片选择工具<br>
            &nbsp;&nbsp;&nbsp;调整到合适的大小,在菜单栏中选择“文件-存储为web格式”,<br>
            &nbsp;&nbsp;&nbsp;在弹出对话框中选择需要的图片格式保存切片即可<br>
        </div>
        <div>
            如何在photoshop中测量图片及图形的尺寸？<br>
            &nbsp;&nbsp;&nbsp;1.是按住ctrl+点击图层缩略图，将图层上的图片或图形载入选区，然后选择菜单栏上的窗口-信息，即可查看所选选区的大小。<br>
            &nbsp;&nbsp;&nbsp;2.是用切片工具选中所要测量区域，双击切片即可得知切片大小。<br>
        </div>
        <h1>html基础标签</h1>
        <div>
            <h2>HTML结构:</h2>
            html<br>
                head<br>
                meta charset=”utf-8”<br>
                title内容title <br>
                head<br>
                body<br>
                    ...任意内容…<br>
                body<br>
            html       <br>
        </div>
        <div>
            <h2>div+css布局的优势:</h2>
            符合w3c标准<br>
            对浏览者和浏览器更具有亲和力<br>
            使页面加载的更快<br>
            保持视觉的一致性<br>
            修改设计时更有效率<br>
            搜索引擎更加友好<br>
        </div>
        <div>
            <h2>HTML基础标签:</h2>
            基本<br>
			html&nbsp;&nbsp;&nbsp;定义HTML文档<br>
			head&nbsp;&nbsp;&nbsp;文档的信息<br>
			meta&nbsp;&nbsp;&nbsp;HTML文档元信息<br>
			title&nbsp;&nbsp;&nbsp;文档的标题<br>
			link&nbsp;&nbsp;&nbsp;文档与外部资源的关系<br>
			style&nbsp;&nbsp;&nbsp;文档的样式信息<br>
			body&nbsp;&nbsp;&nbsp;可见的页面内容<br>
			<!--…-->&nbsp;&nbsp;&nbsp;html注释<br>
			文本<br>
			h1&nbsp;&nbsp;&nbsp;标题字大小（h1~h6）<br>
			b&nbsp;&nbsp;&nbsp;粗体字<br>
			strong&nbsp;&nbsp;&nbsp;粗体字强调<br>
			i&nbsp;&nbsp;&nbsp;斜体字 <br>
		    em&nbsp;&nbsp;&nbsp;斜体字(强调)<br>
			u&nbsp;&nbsp;&nbsp;下划线<br>
			ins&nbsp;&nbsp;&nbsp;下划线（强调）<br>
			del&nbsp;&nbsp;&nbsp;删除线（表示强调）<br>
			s&nbsp;&nbsp;&nbsp;一般删除<br>
			small&nbsp;&nbsp;&nbsp;字体小一号<br>
			center&nbsp;&nbsp;&nbsp;居中文本<br>
			ul&nbsp;&nbsp;&nbsp;无序列表<br>
			ol&nbsp;&nbsp;&nbsp;有序列表<br>
			li&nbsp;&nbsp;&nbsp;列表项目<br>
			a&nbsp;&nbsp;&nbsp;超链接<br>
			font&nbsp;&nbsp;&nbsp;定义文本字体、颜色、大小<br>
			sub&nbsp;&nbsp;&nbsp;下标 CO2<br>
			sup&nbsp;&nbsp;&nbsp;上标<br>
			p&nbsp;&nbsp;&nbsp;段落<br>
			br&nbsp;&nbsp;&nbsp;换行<br>              
		    span&nbsp;&nbsp;&nbsp;一般性文本<br>
			图形<br>
			img&nbsp;&nbsp;&nbsp;定义图像<br>
			hr&nbsp;&nbsp;&nbsp;水平线<br>
			表格&nbsp;&nbsp;&nbsp;<br>
		    table&nbsp;&nbsp;&nbsp;定义表格<br>
			tr&nbsp;&nbsp;&nbsp;定义表格中的行<br>
			td&nbsp;&nbsp;&nbsp;定义表格中的单元格<br>
			其他<br>
			form&nbsp;&nbsp;&nbsp;定义供用户输入的 HTML 表单<br>
        </div>
        <div>
            <h2>img a标签</h2>
            img<br>
            src属性是引入图片<br>
            alt属性是图片设置替换文本<br>
            Width,height属性是改变图片大小<br>
            title属性是为图片设置鼠标悬停时的文本提示<br>
             a href="http:www.baidu.com"  target="_blank"   链接到网址  /a<br>
            href属性是链接网址的路径  target属性是链接的网址是否在新窗口打开<br>
            超链接的四种属性状态<br>
                        1.link:文字链接正常的显示样子<br>
                        2.visited:当这个链接被访问之后的样子<br>
                        3.hover:当鼠标悬停在文字链接上方的样子<br>
            4.active:当文字链接处于激活状态的样子<br>
        </div>
        <div>
            <h2>盒子模型</h2>
            padding/margin<br>
			四值：上右下左<br>
			三值:   上/左右/下<br>
			二值:   上下/<br>
			一值:   上下左右同样值<br>
            margin值碰撞:<br>
                        上下取最大值<br>
                        左右相加<br>
            块状元素并列一排满足的三个条件:<br>
            1.都加浮动<br>
            2.兄弟关系<br>
            3.子级宽小于/等于父级<br>
            通配符  也叫全局选择器  取消标签自带的内外边距<br>
            盒子模型从内到外：content(内容)   padding(内边距)  border(边框) margin(外边距)<br>
        </div>
        <div>
            <h2>Css文本属性</h2>
            font-family="宋体";  文字类型<br>
            font-weight:bold;     文字加粗<br>
            font-weight:normal；  不加粗<br>
            font-style:italic;         文字倾斜<br>
            font-style:normal;     不倾斜 <br>
            text-indent:2em;       首行缩进<br>
            line-height               行间距<br>
            line-height的值与父级高度的值一样时,使单行文本垂直居中 <br>
            word-break:break-all   强制换行<br>
            white-space：nowrap  强制不换行<br>
            color       颜色<br>
            text-decoration    文本装饰<br>
                line-through 删除线<br>
                underline        下划线<br>
                overline       上划线<br>
                none            无<br>
            text-align (文本水平对齐方式) ：left/right/center<br>
            text-align用来设置块级元素里面内容的水平对齐方式，只能设置在块级元素上，<br>
            用来控制块级元素的内容（包括文本、图片），而不能直接在内容上（比如行内元素或者文本）上设置。<br>
            文本两端对齐:text-align:justify   text-align-last:justify(IE)<br>
            letter-spacing    字母间距，中文字间距<br>
            word-spacing    单词之间的距离<br>
            溢出文字显示省略号:<br>
                    white-space:normal;      强制不换行<br>
                    overflow：hidden;         溢出隐藏<br>
            text-overflow:ecllipsis;   溢出文字显示省略号<br>
        </div>
        <div>
            <h2>引用Css样式表</h2>
            引用Css样式表的三种方法:<br>
            1.行内<br>
                    在标签内用style调节属性样式<br>
            2.内嵌<br>
                    <!-- 在head区域建立样式引用块<style type="text/css"></style --><br>
            将样式引用其中<br>
            3.外链<br>
                首先单独建立一个外部样式表文件(后缀名.css)<br>
                然后在HTML文档head标签之间插入link标签<br>
                /* link rel="stylesheet" type="text/css" href="css/style.css"> */<br>
                行内 > 内嵌  > 外链<br>
            选择器的优先级:<br>
                    /* 最高优先级是(直接写在标签中设置样式,假设级别为1000）div style="color:red;"/div */<br>
                    /* 次优先级是ID选择器(ID选择器,假设级别为100)       #myDiv{color:Red;} */<br>
                    /* 其次优先级是（类选择器，假设级别为10） .divClass{color:Red;} */<br>
                    /* 最后优先级是 （标签选择器，假设级别是 1） div{color:Red;} */<br>
                    那么后代选择器就可以进行计算<br>
                    /* 比如 .divClass span{color:red;} 优先级就是10 + 1 = 11 */<br>
        </div>
        <div>
            <h2>x浮动</h2>
            float(浮动) 1eft/right/none<br>
            浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界<br>
                        或者相邻的浮动元素停了下来。<br>
            浮动的特性(作用)<br>
                1.元素不保留原有位置(脱离文档流)<br>
                2.是块状元素一排显示<br>
                3.使内联元素(行内元素)支持宽高<br>
                4.可以让元素适应内容的尺寸(块状元素不加宽度)<br>
                5.使浮动元素提升半个层级<br>
            清除浮动  (clear:left/right/both)<br>
            清除浮动的方法:<br>
                1.父级div定义height(父级为固定高度)<br>
                2.给父级加float属性<br>
                3.使用overflow属性来清除浮动<br>
                4.在结尾加空标签(div或者br)并给空标签加上clear:both属性<br>
                5.使用伪元素::after来清除浮动<br>
        </div>
        <div>
            <h2>列表-文字列表及相关Css属性</h2>
            无序列表 ul li<br>
            有序列表 ol li<br>
            list-style-type属性值<br>
            none：不使用项目符号  <br>
            disc：实心圆<br>
            circle：空心圆<br>
            square：实心方块<br>
            decimal：阿拉伯数字<br>
            lower-alpha：小写英文字母<br>
            upper-alpha：大写英文字母<br>
            lower-roman：小写罗马数字<br>
            upper-roman：大写罗马数字<br>
            list-style-image属性用来定义使用图片代替项目符号。<br>
            none：没有替换的图片<br>
            url：要替换图片的路径<br>
            ist-style-position属性，是用来定义项目符号在列表中显示位置的属性<br>
            inside：项目符号放置在文本以内<br>
            outside：项目符号放置在文本以外。<br>
            主要区别在换行以后项目符号的位置。<br>
        </div>
        <div>
            <h2>列表-导航实例</h2>
            块状元素特点:<br>
            1.独占一行<br>
            2.默认宽度100%撑满父级,设置宽 width,高 height有效<br>
            3.margin,padding(内外边距) 上下左右均有效<br>
            4.可以容纳内联元素和其他元素,通常作为父级元素出现<br>
        行内元素特点:<br>
            1.可以和其他行内元素并列一排<br>
            2.默认宽度为内容宽度,设置宽度 width和 height无校,可以
            设置 line-height(行高)
            3.设置margin，padding(内外边距)只有左右margin有效,上下无效<br>
            4.通常作为子元素出现<br>
            行内元素与块状元素的转换 (display属性)<br>
            display：block<br>
            block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动撑满其父元素宽度<br>
            block元素可以设置width，height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。<br>
            display：inline<br>
            inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到排列不下，才会新换一行，其宽度随元素内容而变化。inline元素设置width，height属性无效<br>
            inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。<br>
            display:inline-block<br>
            简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。<br>
            比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。	<br>
            display:none<br>
            元素隐藏<br>
            为什么导航要用ul+li+a来做	<br>
            用合适的标签来组织文档。<br>
            导航从其本意上说，不是一个段落P，更不是一些个标题Hx，也不是一个DIV，DIV只是部分与分区。<br>
            导航实质上就是一个无序列表。<br>
            也就是说，用UL+LI来组织导航的内容，更具有语义，具有更好的结构。<br>
        </div>
        <div>
            <h2>表格</h2>
            border-collapse：collapse;   折叠的collapse  分开的 separate<br>
            border-spacing:1px;    spacing 间隙<br>
            table-layout:fixed;   table表格    layout布局   fixed固定的<br>
            empty-cells:hide;     empty空的   cells单元格     hide隐藏<br>
            tbody tr :nth-child(odd)  odd奇数行     tbody 表格主体   nth 第几个  child子元素<br>
            tbody tr :nth-child(even)  even偶数行<br>
            <!--表格标题-->
            caption这是一个表格caption>    caption标题<br>
            表格的完整结构:<br>
                table<br>
                    thead<br>
                        tr<br>
                            td<br>
                            td<br>
                        tr<br>
                    thead<br>
                    tbody<br>
                        tr<br>
                            td<br>
                            td<br>
                        tr<br>
                    tbody<br>
                    tfoot<br>
                        tr<br>
                            td<br>
                            td<br>
                        tr<br>
                    tfoot<br>
                table<br>
        </div>
        <div>
            <h2>表单</h2>
            文本框:input type="text"<br>
            密码框:input type="password"<br>
            单选框: input type="radio"<br>
            复选框:input type="checkbox"<br>
            下拉选择框:<br>
                select<br>
                    option<br>
                select<br>
            文件上传框:input type="file"<br>
            图像域: input type="image"<br>
            表单相关属性<br>
                autofocus  自动聚焦<br>
                disabled     禁止键入<br>
                required     定义必须输入一个键,否则无法通过验证<br>
                minlength   设置文本框最小字符长度<br>
                maxlength   设置文本框最大字符长度<br>
                placeholder  输入字符的提升<br>
                autocomplete   定义自动键入功能  （on or off）<br>
                表单按钮<br>
                    input type="submit"    提交按钮<br>
                    input type="reset"     重置按钮<br>
                    input type="button"  一般按钮<br>
        </div>
        <div>
            <h2>定位</h2>
            绝对定位和相对定位的区别?<br>
            绝对定位(absolute): 将被赋予此定位方法的对象从文档流中拖出,使用left、right、top、 bottom等属性相对于其最接近的一个有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制。z-index值为无单位的整数,大的在最上面,可以有负值。<br>
            相对定位(relative)：相对定位是相对于自身原来的位置来定位的,不会脱离文档流,依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。<br>
            绝对定位相对于有定位的属性父级元素来定位的,如果没有父级元素,它就往上找,<br>
            直到body，相对于body体的左上角来定位。<br>
            相对定位是相对于自身原来的位置来定位的。两种定位属性值相同的情况下，<br>
            绝对定位可以重叠，相对定位不能重叠。<br>
            常见的定位属性:绝对定位(absolute),相对定为(relative)，固定定位(fixed)<br>
        </div>
</body>
</html>